<template>
	<view class="content">
		<u-tabs :list="list" @click="changeTab" lineWidth="0" lineColor="#fff" :activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.15)',
						backgroundColor:'#fff'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px; background-color: #fff;">
		</u-tabs>
		<view class="menu_list">
			<u-transition :show="show" mode="fade" duration="300">
				<ul>
					<li @click='jumpPage(turndata[0])'>
						<icon class="iconfont icon-xishicanting"></icon>
						<view class="font-text">吃什么转盘</view>
					</li>
					<li @click='jumpPage(turndata[1])'>
						<icon class="iconfont icon-youxi"></icon>
						<view class="font-text">玩什么转盘</view>
					</li>
					<li @click='jumpPage(turndata[2])'>
						<icon class="iconfont icon-feiji1"></icon>
						<view class="font-text">去哪玩转盘</view>
					</li>
					<!-- <li @click='jumpPage("dyClearMark")'>
						<icon class="iconfont icon-suijixuanrenheqiangdaqi"></icon>
						<view class="font-text">选数字转盘</view>
					</li> -->
					<li @click='jumpPage(turndata[3])'>
						<icon class="iconfont icon-2ezgl"></icon>
						<view class="font-text">选人转盘</view>
					</li>
					<li @click='jumpPage(turndata[4])'>
						<icon class="iconfont icon-aixin1"></icon>
						<view class="font-text">真心话转盘</view>
					</li>
					<li @click='jumpPage(turndata[5])'>
						<icon class="iconfont icon-climber"></icon>
						<view class="font-text">大冒险转盘</view>
					</li>
				</ul>
			</u-transition>
			<u-transition :show="show2" mode="fade" duration="300">
				<div class="creatediv" @click='createTurnBtn()'>
					<u-icon name="plus-circle" color="#1c90ff" size="28"></u-icon>
					<span>创建新转盘</span>
				</div>
				<view class="myturn">
					<view @click='jumpPage(item.turntablesDates)' class="myturn-con"
						v-for="(item,index) in turntabledata">
						<view>{{item.turntablesDates.turnTitle}}</view>
						<u-icon name="more-dot-fill" color="#ccc" size="28"
							@click.native.stop="moreClick(item)"></u-icon>
					</view>
				</view>
			</u-transition>
		</view>
		<u-popup :show="bottomShow" mode="bottom" @close="close" :round="15">
			<view class="bottomPopup">
				<text @click="itemClick(1)">编辑</text>
				<text @click="itemClick(2)">删除</text>
				<text @click="itemClick(3)">取消</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import cloudApi from '../../common/cloudApi.js'
	import turndataArr from './turntabledata.js'
	import {
		getTrunTable,
		delTurn
	} from '../../request/user.js'
	export default {
		data() {
			return {
				turndata:turndataArr,
				currentItem: null,
				bottomShow: false,
				show: true,
				show2: false,
				curNow: 0,
				index: true,
				changeOrAdd: '',
				title: '删除事项',
				content: '确定要删除？',
				delFlag: false,
				id: '',
				keyword: '',
				albumWidth: 0,
				urls2: [],
				list: [{
					name: '热门转盘',
				}, {
					name: '我的转盘',
				}],
				turntabledata: []
			}
		},
		async onShow() {
			console.log('index-------------------------',turndataArr)
			this.getTrunTableDate()
		},
		methods: {
			changeTab(item) {
				this.$shake()
				if (item.index === 0) {
					this.show2 = false
					setTimeout(() => {
						this.show = true
					}, 400)
				}
				if (item.index === 1) {
					this.show = false
					setTimeout(() => {
						this.show2 = true
					}, 400)
					//获取个人转盘数据
					this.getTrunTableDate()
				}
			},
			async getTrunTableDate() {
				const res = await getTrunTable(uni.getStorageSync('openid'))
				this.turntabledata = res.data
				console.log('getTrunTableDate', res)
			},
			clickTable(name) {
				this.$shake()
				if (name == '0') {
					cloudApi.call({
						name: 'aiSdk',
						data: {
							text: this.text
						},
						success: async res => {
							console.log(res.result.data.data)
							let unit8Arr = new Uint8Array(res.result.data.data);
							console.log(unit8Arr)
							let bs64_str = "data:audio/mp3;base64," + uni.arrayBufferToBase64(unit8Arr)
							let audios = uni.createInnerAudioContext()
							console.log('bs64_str', bs64_str)
							audios.src = bs64_str;
							audios.autoplay = true
							audios.play()
							audios.onError((res1) => {
								console.log(res1.errMsg);
								console.log(res1.errCode);
							});
							audios.onPlay(() => {
								console.log('开始播放');
							});

						}
					})
				}
			},
			// 跳转事项
			jumpPage(tableinfo) {
				this.$shake()
				console.log('tableinfo', tableinfo, JSON.stringify(tableinfo))
				uni.navigateTo({
					url: `comturn?tableinfo=${JSON.stringify(tableinfo)}`
				});
			},
			createTurnBtn() {
				this.$shake()
				uni.navigateTo({
					url: 'createTurn'
				});
			},
			moreClick(item) {
				this.$shake()
				console.log(item)
				this.currentItem = item
				this.bottomShow = true
			},
			close() {
				this.bottomShow = false
			},
			async itemClick(index) {
				this.$shake()
				console.log(index)
				if (index === 1) {
					console.log('this.currentItem', this.currentItem)
					uni.navigateTo({
						url: `createTurn?tableinfo=${JSON.stringify({...this.currentItem,type:"edit"})}`
					});
					this.close()
				} else if (index === 2) {
					const res = await delTurn(this.currentItem._id)
					if (res.status === 200) {
						this.getTrunTableDate()
					}
					this.close()
				} else if (index === 3) {
					this.close()
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/font/font.css";

	.font-text {
		font-family: "得意黑 斜体";
	}

	.iconfont {
		// background-color: #4b2cff;
		width: 60rpx;
		height: 60rpx;
		font-size: 50rpx;
	}

	::v-deep .u-tabs {
		background-color: #fff;

		.u-tabs__wrapper__nav {
			display: flex;
			text-align: center;
			justify-content: space-evenly;
		}
	}

	.content {
		background-color: #f6f6f7;
		min-height: 100vh;

		.menu_list {
			box-sizing: border-box;

			ul {
				display: flex;
				justify-content: space-evenly;
				flex-wrap: wrap;

				li {
					background-color: #fff;
					width: 45%;
					text-align: center;
					margin-top: 30rpx;
					margin-bottom: 30rpx;
					border-radius: 30rpx;
					padding: 50rpx 40rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: start;

					view {
						height: 60rpx;
						line-height: 70rpx;
						margin-left: 20rpx;
					}
				}
			}

			.creatediv {
				display: flex;
				justify-content: space-evenly;
				width: 80%;
				margin: 30rpx auto;
				padding: 25rpx;
				border: 1px solid #1c90ff;
				border-radius: 30rpx;
				background-color: #fff;

				span {
					line-height: 62rpx;
					font-size: 32rpx;
				}
			}

			.myturn {
				margin: 0 auto;
				width: 87%;

				.myturn-con {
					width: 100%;
					background-color: #fff;
					border: 1px solid #fff;
					border-radius: 30rpx;
					padding: 35rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
				}
			}
		}

		.add {
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 80rpx;
			width: 200rpx;
			height: 100rpx;
			line-height: 90rpx;
			text-align: center;
			border-radius: 50rpx;
			border: 1px solid #fff;
			font-size: 50px;
			color: #00dd93;
			box-shadow: 5px 5px 10px #c5c5c5;
		}

		.list {
			background-color: #fff;
			width: 95%;
			margin: 20rpx auto;
			border-radius: 20rpx;
			padding: 20rpx 0;

			.time {
				border-bottom: 1px solid #e5e5e5;
				padding-left: 20rpx;
				padding-right: 60rpx;
				padding-bottom: 20rpx;
				font-size: 22rpx;

				.btn {
					color: #096;
					float: right;
					font-size: 26rpx;
				}
			}

			.text {
				padding: 20rpx;
				min-height: 60rpx;
			}
		}

		// 弹出层
		/deep/ .u-popup {
			padding: 150rpx 130rpx 100rpx;

			.u-transition {
				.aaa {
					padding: 80rpx;
					width: 80vw;
					height: 300rpx;
					background-color: #fff;
				}

				.bbb {
					padding: 150rpx 120rpx;

					p {
						color: #333;
						font-size: 26rpx;
						margin-top: 60rpx;
					}
				}
			}
		}
	}

	.bottomPopup {
		display: flex;
		flex-direction: column;
		text-align: center;

		text {
			border-bottom: 1px solid #e9e9e9;
			padding: 18rpx 0rpx;
		}

		text:last-of-type {
			border-bottom: none;
		}
	}
</style>